<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="七星彩一号表" name="first">
        <table class="table" border="1" >
            <tr >
              <td class="title">选项</td>
              <td class="cate">
                <div class="cate_btn">
                  <el-button  v-for="btn,index of btns" :key="btn" size="small" :type="btnIndex == index?'primary':'info'" @click="changeList(index)">{{btn}}</el-button>
                </div>
              </td>
            </tr>
          <tr>
            <td class="title">定位</td>
            <td class="content">
              <div class="content_title">
                <span>1.请选择投注号码(如果使用大底,该项不可选)</span>
              </div>
              <el-form v-if="btnIndex == 0" ref="form" :model="form" label-width="60px" class="form">
               <el-form-item label="百位:">
                 <el-checkbox-group v-model="selectHunderdList">
                   <el-checkbox :label="hundred" v-for="hundred in hundredList" :key="hundred" ></el-checkbox>
                   <el-button class="allBtn" size="small" @click="allhundred">全选</el-button>
                   <el-button size="small" @click="canhundred">取消</el-button>
                 </el-checkbox-group>
               </el-form-item>
               <el-form-item label="十位:">
                 <el-checkbox-group v-model="selectTenList">
                   <el-checkbox :label="ten" v-for="ten in tenList" :key="ten"></el-checkbox>
                   <el-button class="allBtn" size="small" @click="allTen">全选</el-button>
                   <el-button size="small" @click="canTen">取消</el-button>
                 </el-checkbox-group>
               </el-form-item>
               <el-form-item label="个位:">
                 <el-checkbox-group v-model="selectBitList">
                   <el-checkbox :label="bit" v-for="bit in bitList" :key="bit"></el-checkbox>
                   <el-button class="allBtn" size="small" @click="allBit">全选</el-button>
                   <el-button size="small" @click="canBit">取消</el-button>
                 </el-checkbox-group>
               </el-form-item>
              </el-form>
              <el-form v-if="btnIndex == 1" ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="十万位:">
                  <el-checkbox-group v-model="selectHunderdList">
                    <el-checkbox :label="hundred" v-for="hundred in hundredList" :key="hundred" ></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allhundred">全选</el-button>
                    <el-button size="small" @click="canhundred">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="万位:">
                  <el-checkbox-group v-model="selectTenList">
                    <el-checkbox :label="ten" v-for="ten in tenList" :key="ten"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allTen">全选</el-button>
                    <el-button size="small" @click="canTen">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="千位:">
                  <el-checkbox-group v-model="selectBitList">
                    <el-checkbox :label="bit" v-for="bit in bitList" :key="bit"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allBit">全选</el-button>
                    <el-button size="small" @click="canBit">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
              <el-form v-if="btnIndex == 2" ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="个位:">
                  <el-checkbox-group v-model="selectBits">
                    <el-checkbox :label="bit" v-for="bit in bits" :key="bit"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allBits">全选</el-button>
                    <el-button size="small" @click="canBits">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr v-if="btnIndex==0||btnIndex==1">
            <td class="title">奇偶过滤</td>
            <td class="content" >
              <div class="content_title">
                <span>2.奇偶过滤</span>
              </div>
              <el-form ref="form" :model="form" label-width="20px" class="form">
                <el-form-item>
                  <span>包含选中</span>
                  <el-button class="allBtn" size="small" @click="allJo">全选</el-button>
                  <el-button size="small" @click="canJo">取消</el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="j.title" v-for="j in jList" :key="jList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
               <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="o.title" v-for="o in oList" :key="oList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr v-if="btnIndex==2">
            <td class="title">奇偶比过滤</td>
            <td class="content2">
              <div class="content_title">
                <span>3.奇偶比过滤</span>
              </div>
              <el-form ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="奇偶比:">
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="jo" v-for="jo in joList" :key="jo"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>

        </table>
        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="starBtnClick(btnIndex)">开始分析</el-button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="七星彩二号表" name="second">
        <table class="table" border="1" >
            <tr >
              <td class="title">选项</td>
              <td class="cate">
                <div class="cate_btn">
                  <el-button  v-for="btn,index of btns" :key="btn" size="small" :type="btnIndex == index?'primary':'info'" @click="changeList(index)">{{btn}}</el-button>
                </div>
              </td>
            </tr>
          <tr>
            <td class="title">定位</td>
            <td class="content">
              <div class="content_title">
                <span>1.请选择投注号码(如果使用大底,该项不可选)</span>
              </div>
              <el-form v-if="btnIndex == 0" ref="form" :model="form" label-width="60px" class="form">
               <el-form-item label="百位:">
                 <el-checkbox-group v-model="selectHunderdList">
                   <el-checkbox :label="hundred" v-for="hundred in hundredList" :key="hundred" ></el-checkbox>
                   <el-button class="allBtn" size="small" @click="allhundred">全选</el-button>
                   <el-button size="small" @click="canhundred">取消</el-button>
                 </el-checkbox-group>
               </el-form-item>
               <el-form-item label="十位:">
                 <el-checkbox-group v-model="selectTenList">
                   <el-checkbox :label="ten" v-for="ten in tenList" :key="ten"></el-checkbox>
                   <el-button class="allBtn" size="small" @click="allTen">全选</el-button>
                   <el-button size="small" @click="canTen">取消</el-button>
                 </el-checkbox-group>
               </el-form-item>
               <el-form-item label="个位:">
                 <el-checkbox-group v-model="selectBitList">
                   <el-checkbox :label="bit" v-for="bit in bitList" :key="bit"></el-checkbox>
                   <el-button class="allBtn" size="small" @click="allBit">全选</el-button>
                   <el-button size="small" @click="canBit">取消</el-button>
                 </el-checkbox-group>
               </el-form-item>
              </el-form>
              <el-form v-if="btnIndex == 1" ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="十万位:">
                  <el-checkbox-group v-model="selectHunderdList">
                    <el-checkbox :label="hundred" v-for="hundred in hundredList" :key="hundred" ></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allhundred">全选</el-button>
                    <el-button size="small" @click="canhundred">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="万位:">
                  <el-checkbox-group v-model="selectTenList">
                    <el-checkbox :label="ten" v-for="ten in tenList" :key="ten"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allTen">全选</el-button>
                    <el-button size="small" @click="canTen">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="千位:">
                  <el-checkbox-group v-model="selectBitList">
                    <el-checkbox :label="bit" v-for="bit in bitList" :key="bit"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allBit">全选</el-button>
                    <el-button size="small" @click="canBit">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
              <el-form v-if="btnIndex == 2" ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="个位:">
                  <el-checkbox-group v-model="selectBits">
                    <el-checkbox :label="bit" v-for="bit in bits" :key="bit"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allBits">全选</el-button>
                    <el-button size="small" @click="canBits">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr v-if="btnIndex==0||btnIndex==1">
            <td class="title">奇偶过滤</td>
            <td class="content" >
              <div class="content_title">
                <span>2.奇偶过滤</span>
              </div>
              <el-form ref="form" :model="form" label-width="20px" class="form">
                <el-form-item>
                  <span>包含选中</span>
                  <el-button class="allBtn" size="small" @click="allJo">全选</el-button>
                  <el-button size="small" @click="canJo">取消</el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="j.title" v-for="j in jList" :key="jList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
               <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="o.title" v-for="o in oList" :key="oList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr v-if="btnIndex==2">
            <td class="title">奇偶比过滤</td>
            <td class="content2">
              <div class="content_title">
                <span>3.奇偶比过滤</span>
              </div>
              <el-form ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="奇偶比:">
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="jo" v-for="jo in joList" :key="jo"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>

        </table>
        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="starBtnClick(btnIndex)">开始分析</el-button>
        </div>



      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
  export default {
    name: 'RankSeven',
    data() {
      return {
        activeName: 'first',
        checkAll: false,
        btns : ["前三位","中间三位","组合成七位"],
        btnIndex : 0,
        bitList: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'], // 个位
        tenList: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'], // 十位
        hundredList: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'], // 百位
        bits: ['0','1', '2', '3', '4', '5', '6', '7','8','9', '10', '11', '12', '13', '14'], // 组合成七位个位
        joList: ["0:7", "1:6", "2:5", "3:4", "4:3", "5:2", "6:1", "7:0"], //奇偶比
        jList: [{
            id: "111",
            title: "奇奇奇"
          },
          {
            id: "110",
            title: "奇奇偶"
          },
          {
            id: "101",
            title: "奇偶奇"
          },
          {
            id: "011",
            title: "偶奇奇"
          }
        ], // 奇
        oList: [{
            id: "000",
            title: "偶偶偶"
          },
          {
            id: "001",
            title: "偶偶奇"
          },
          {
            id: "010",
            title: "偶奇偶"
          },
          {
            id: "100",
            title: "奇偶偶"
          }
        ], // 奇
        selectHunderdList: [],
        selectTenList: [],
        selectBitList: [],
        selectJoList: [],
        selectJoIdList: [],
        selectBits:[],
        front_list:[], // 前三位数组
        middle_list:[], // 中间三位数组
        form: {
        }
      };
    },
    methods: {
      handleClick(tab, event) {
         this.activeName = tab.name;
      },

      // 选项点击
      changeList(index) {
        this.btnIndex = index;
        console.log(index)
      },


      // 百位全选
      allhundred(val) {
        this.selectHunderdList = val ? this.hundredList : [];
      },
      // 百位取消
      canhundred(val) {
        this.selectHunderdList = [];
      },
      // 十位全选
      allTen(val) {
        this.selectTenList = val ? this.tenList : [];
      },
      // 十位取消
      canTen(val) {
        this.selectTenList = [];
      },
      // 个位全选
      allBit(val) {
        this.selectBitList = val ? this.bitList : [];
      },
      // 个位取消
      canBit(val) {
        this.selectBitList = [];
      },
      // 七位个位全选
      allBits(val) {
        this.selectBits = val ? this.bits : [];
      },
      // 七位个位取消
      canBits(val) {
        this.selectBits = [];
      },


      // 奇偶全选
      allJo(val) {
        this.selectJoIdList = [];
        this.selectJoList = [];
        var len = this.jList.length;
         for(var i=0;i<this.jList.length;i++){
           let item = this.jList[i];
           this.selectJoIdList.push(item.id);
           this.selectJoList.push(item.title);
         }
         var len = this.oList.length;
          for(var i=0;i<this.oList.length;i++){
            let item = this.oList[i];
            this.selectJoIdList.push(item.id);
            this.selectJoList.push(item.title);
          }
         console.log(this.selectJoIdList);
      },
      // 奇偶取消
      canJo(val) {
        this.selectJoList = [];
        this.selectJoIdList = [];
      },

      // 奇偶多选
      seleceJo(){
        this.selectJoIdList = [];
        if (this.selectJoList.length > 0) {
          for (let i = 0; i < this.selectJoList.length; i++) {
            let title = this.selectJoList[i];
            for(let j=0;j<this.jList.length;j++){
              let item = this.jList[j];
              if (title == item.title) {
                this.selectJoIdList.push(item.id);
              }
            }
            for(let o=0;o<this.oList.length;o++){
              let item = this.oList[o];
              if (title == item.title) {
                this.selectJoIdList.push(item.id);
              }
            }
          }
        }
        console.log(this.selectJoIdList);
      },

      // 开始分析
      starBtnClick() {

        this.seleceJo();


        // 前三位和中间三位
        if (this.btnIndex == 0|| this.btnIndex ==1) {

          // 验证提交信息
          if (this.btnIndex == 0) {
            if (this.selectHunderdList.length == 0) {
              return this.$message.error('请选择百位');
            }
            if (this.selectTenList.length == 0) {
              return this.$message.error('请选择十位');
            }
            if (this.selectBitList.length == 0) {
             return this.$message.error('请选择个位');
            }
          }else {
            if (this.selectHunderdList.length == 0) {
              return this.$message.error('请选择十万位');
            }
            if (this.selectTenList.length == 0) {
              return this.$message.error('请选择万位');
            }
            if (this.selectBitList.length == 0) {
              return this.$message.error('请选择千位');
            }
          }
          if (this.selectJoIdList.length == 0) {
            return this.$message.error('请选择奇偶');
          }
            this.getdwjo()
        }else { // 组合成七位

            if (this.activeName == 'first') {
              this.front_list = window.localStorage.getItem("forwardfilterData");
              this.middle_list = window.localStorage.getItem("middlefilterData");
              console.log(this.front_list);
              if (!window.localStorage.getItem("forwardfilterData")) {
                return this.$message.error('请选择前三位');
              }
              if (!window.localStorage.getItem("middlefilterData")) {
                return this.$message.error('请选择中间三位');
              }
            }else {
              this.front_list = window.localStorage.getItem("forwardfilterData2");
              this.middle_list = window.localStorage.getItem("middlefilterData2");
              console.log(this.front_list);
              if (!window.localStorage.getItem("forwardfilterData2")) {
                return this.$message.error('请选择前三位');
              }
              if (!window.localStorage.getItem("middlefilterData2")) {
                return this.$message.error('请选择中间三位');
              }

            }

            if (this.selectBits.length == 0) {
              return this.$message.error('请选择个位');
            }
            if (this.selectJoList.length == 0) {
              return this.$message.error('请选择奇偶比');
            }

            this.getQixingdwjo()
        }

      },

      // 查询定位奇偶过滤
      async getdwjo(){

        try {
         const res = await this.$http.post("/api/calc/dwjo",{
            bit:JSON.stringify(this.selectBitList),
            ten:JSON.stringify(this.selectTenList),
            hundred:JSON.stringify(this.selectHunderdList),
            jo:JSON.stringify(this.selectJoIdList)
         })
         if(res.data.code == 200) {
            // console.log(res)
            if (this.activeName == 'first') {
              if (this.btnIndex==0) {
                window.localStorage.setItem("dwjoForwardList",JSON.stringify(res.data.data));
                this.$router.push({
                  path: '/home/rankThreeAnalysis',
                  query: {activeName:this.activeName, type: 1}
                })
              }else {
                window.localStorage.setItem("dwjoMiddleList",JSON.stringify(res.data.data));
                this.$router.push({
                  path: '/home/rankThreeAnalysis',
                  query: {activeName:this.activeName,type: 2}
                })
              }

            }else {
              if (this.btnIndex==0) {
                window.localStorage.setItem("dwjoForwardList2",JSON.stringify(res.data.data));
                this.$router.push({
                  path: '/home/rankThreeAnalysis',
                  query: {activeName:this.activeName, type: 1}
                })
              }else {
                window.localStorage.setItem("dwjoMiddleList2",JSON.stringify(res.data.data));
                this.$router.push({
                  path: '/home/rankThreeAnalysis',
                  query: {activeName:this.activeName,type: 2}
                })
              }

            }

         }else {
           this.$message.error(res.data.msg);
         }
        } catch (error) {
           this.$message.error("请求失败");

        }
      },

      // 清空已选中的数据
      clear() {
        this.selectBitList = [];
        this.selectTenList = [];
        this.selectHunderdList = [];
        this.selectJoList = [];
        this.selectJoIdList = [];
      },


      // 查询组合成七位
      async getQixingdwjo(){

        try {
          const res = await this.$http.post("/api/qixing/dwjo", {
            bit: JSON.stringify(this.selectBits),
            front_list:  this.front_list,
            middle_list: this.middle_list,
            jo: JSON.stringify(this.selectJoList)
          })
          if (res.data.code == 200) {
            console.log(this.activeName)
            // 一号表
            if (this.activeName == 'first') {
              window.localStorage.setItem("dwjoSevenList", JSON.stringify(res.data.data));
              this.$router.push({ path: '/home/rankSevenAnalysis',
                query:{activeName:this.activeName}
              })
            }else {
              window.localStorage.setItem("dwjoSevenList2", JSON.stringify(res.data.data));
              this.$router.push({ path: '/home/rankSevenAnalysis',
                query:{activeName:this.activeName}
              })
            }
          } else {
            this.$message.error(res.data.msg);
          }
        } catch (error) {
          this.$message.error("请求失败");
        }
      }

    }

  }
</script>

<style scoped="scoped">

  .container {
    height: 100%;
  }

  .table {
    width: 100%;
    height: 400px;
    border-color: #2676C2;
    border-collapse: collapse;
  }

  .cate {
    height: 50px;
  }
  .cate_btn {
    margin-left: 15px;
  }

  .title {
    width: 140px;
    color: #2676C2;
    text-align: center;
  }

  .content {
    height: 200px;
    margin: 0px;
    padding: 0px;
  }

  .content_title {
    margin: 0px;
    padding: 0px;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .allBtn {
    margin-left: 20px;
  }
</style>
